<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-11 21:42:49
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:20:03
-->
<template>
  <div>
    <el-header
      class="user_header"
      height="60px"
    >
      <i
        class="sidebar-btn"
        :class="$store.getters['getCollapse'] ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        @click="$store.commit('setCollapse', !$store.state.isCollapse)"
      />
      <span class="user_title">欢迎，{{$store.getters['commonUser/getUsername']}}</span>
      <el-dropdown
        class="user_dropdown"
        @command="handleCommand"
      >
        <el-avatar
          :size="40"
          :src="circleUrl"
        />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
          <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <SideBar></SideBar>
    <el-main class="user_main">
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import SideBar from './sideBar/index.vue'

export default {
  name: 'Home',
  components: {
    SideBar
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'userInfo') {
        this.$router.push('/Info');
      }
      else if (command === 'changePwd') {
        this.$router.push('/changePwd')
      }
      else if (command === 'logOut') {
        this.$store.commit('commonUser/clearData');
        this.$router.push('/login');
      }
    }
  }
}
</script>

<style lang="scss">
body {
  margin: 0 0 0 0;
}

.user_header {
  background-color: #303133;
  position: fixed;
  z-index: 1895;
  width: 100%;
  
  .sidebar-btn {
    color: #777777;
    font-size: 40px;
    margin: 10px 30px 10px 0px;
  }

  .user_title {
    color: #FFFFFF;
    font-size: 24px;

  }

  .user_dropdown {
    float: right;
    margin: 10px 0px 10px 0px;
  }
}

.user_main {
  background-color: #F7F7F7;
  padding: 0px 0px 0px 0px !important;
  position: fixed;
  top: 60px;
  height: calc(100% - 60px);
  width: 100%;
}

</style>
